<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-table
        v-loading="loading"
        :data="list"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="store-table-expand">
              <el-form-item label="身份证：">
                <el-card v-if="props.row.idcard_pic" class="card-img" :body-style="{ padding: '0px'}">
                  <a href="javascript:0" @click="imgPreview(props.row.idcard_pic_url)">
                    <img :src="props.row.idcard_pic_url" class="image">
                   </a>
                </el-card>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="昵称">
        </el-table-column>
        <el-table-column
          prop="realname"
          label="真实姓名">
        </el-table-column>
        <el-table-column
          prop="telphone"
          label="手机号">
        </el-table-column>
        <el-table-column
          prop="idcard"
          label="身份证号码">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          prop="name"
          label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" width="50px" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="状态">
          <template slot-scope="scope">
            <el-tag
              type="success"
              close-transition>正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="个人认证">
          <template slot-scope="scope">
            <el-tag
              :type="[scope.row.check, 'class'] | checkFilter"
              close-transition>{{ [scope.row.check, 'text'] | checkFilter }}</el-tag>

          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="created_at"
          label="企业认证">
          <template slot-scope="scope">
            <el-tag
              :type="[scope.row.ent_check, 'class'] | checkFilter"
              close-transition>{{ [scope.row.ent_check, 'text'] | checkFilter }}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="created_at"
          label="注册日期">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click="pass(scope.row)"
              type="text"
              size="small">
              同意
            </el-button>
            <el-button
              @click="refuse(scope.row)"
              type="text"
              size="small">
              拒绝
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[15, 25, 50, 100]"
          :page-size="query.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageMeta.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { fetchList, checkPass } from '@/api/test'

export default {
  data() {
    return {
      pageMeta: {
        total: 0
      },
      query: {
        size: 15,
        page: 1
      },
      list: null,
      loading: true
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      fetchList(this.query).then(res => {
        const data = res.data
        this.pageMeta.total = data.total
        this.query.page = data.current_page
        this.list = data.data
        this.loading = false
      }).catch(err => {
        console.log(err)
      })
    },
    pass(row) { // 通过认证
      checkPass(row.id, {
        check: 2
      }).then(res => {
        this.$message({
          message: '审核通过了',
          type: res.status === 'success' ? 'success' : 'warning'
        })
        this.getList() // 重新刷新用户数据
      })
      this.dialogVisible = false // 关闭弹窗
    },
    refuse(row) {
      checkPass(row.id, {
        check: -1
      }).then(res => {
        this.$message({
          message: '已拒绝该用户申请',
          type: res.status === 'success' ? 'success' : 'warning'
        })
        this.getList() // 重新刷新用户数据
      })
      this.dialogVisible = false // 关闭弹窗
    },
    showl(row) {
      this.$router.push({ name: 'test.show', params: { id: row.id }})
    },
    // 重设每页显示数量
    handleSizeChange(val) {
      this.pageMeta.size = val
      this.getList()
    },
    // 翻页
    handleCurrentChange(val) {
      this.pageMeta.page = val
      this.getList()
    },
    imgPreview(img) {
      this.$alert('<img src="' + img + '" alt="">', '', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        customClass: 'img-view',
        closeOnClickModal: true
      })
    }
  },
  filters: {
    checkFilter([check, type]) {
      const checkMap = {
        '-1': {
          text: '验证未通过',
          class: 'danger'
        },
        '0': {
          text: '未验证',
          class: 'warning'
        },
        '1': {
          text: '审核中',
          class: 'warning'
        },
        '2': {
          text: '已验证',
          class: 'success'
        }
      }

      if (typeof checkMap[check] !== 'undefined') {
        return checkMap[check][type]
      } else {
        return check
      }
    }
  },
  computed: {
  }
}
</script>

